<template>
  <view class="card" @click="$utils.to(`/pages2/store/goods_detail?id=${info.id}`)">
    <view :style="{ width: imgWidth }">
      <u-image :width="imgWidth" :height="imgHeight" radius="12rpx" :src="info.image"></u-image>
    </view>
    <view class="ml-24" style="flex: 1">
      <u--text :text="info.title" :lines="1" size="32rpx" bold></u--text>
      <view class="infos">
        <view class="info-item">
          <text>净含量:</text>
          <text>{{ info.volume || "" }}ml</text>
        </view>
        <view class="info-item">
          <text>酒精度:</text>
          <text>{{ info.alcohol || "" }}度</text>
        </view>
        <view class="info-item">
          <text>香　型:</text>
          <text>{{ info.aroma_name || "" }}</text>
        </view>
        <view class="flex-between-center">
          <view class="info-item">
            <text>品　牌:</text>
            <text>{{ info.brand_name || "" }}</text>
          </view>
          <view class="price-info flex-column-center mt-12">
            <text class="fs-32 fw-600 c-ff0000">￥{{ info.price || 0 }}</text>
            <text class="fs-24">起</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      btnStyle: {
        backgroundColor: "transparent",
        width: "124rpx",
        height: "56rpx",
        color: "#C5261D",
        borderRadius: "8rpx",
        fontSize: "24rpx",
      },
    };
  },
  props: {
    imgWidth: {
      type: String,
      default: "276rpx",
    },
    imgHeight: {
      type: String,
      default: "216rpx",
    },
    info: {
      type: Object,
      default: () => { },
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  display: flex;
  align-items: flex-start;

  .infos {
    .info-item {
      font-size: 28rpx;
      margin-top: 20rpx;

      &>text:first-child {
        color: #677585;
        margin-right: 20rpx;
      }

      &>text:last-child {
        color: #1c1714;
      }
    }
  }
}
</style>